import { defineComponent, reactive, KeepAlive, Transition, nextTick } from "vue";
import styles from "./index.module.less";
import MenuSider from "@/components/index/menu-sider/menu-sider";
import Header from "@/components/index/header/header";
import Tags from "@/components/index/tags/tags";
import { useStore as useTagsStore } from "@/store/tags";
export default defineComponent({
  name: 'index',
  setup() {
    const tagsStore = useTagsStore();
    const state = reactive({
      collapsed: false,
    })
    const Components = () => (
      <>
        <a-layout class={styles.index}>
          <MenuSider collapsed={state.collapsed} />
          <a-layout id="layout">
            <a-layout-header class={styles.header}>
              <Header v-model={[state.collapsed, 'collapsed']}></Header>
              <Tags />
            </a-layout-header>
            <a-layout-content class={styles.content}>
              <div class={styles.main}>
                {
                  <router-view>
                    {
                      ({ Component, route }: { Component: any, route: any }) => {
                        return (
                          <Transition name="fade-transform" mode="out-in">
                            <KeepAlive include={tagsStore.tags.filter(x => x.meta?.isCache).map(x => x.name)}>
                              {Component && <Component key={route.name + (tagsStore?.tags?.find(x => x.name === route.name)?.key ?? '')} />}
                            </KeepAlive>
                          </Transition>
                        )
                      }
                    }
                  </router-view>
                }
              </div>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </>
    )
    return {
      Components,
    }
  },
  render() {
    return <this.Components></this.Components>
  },
})